<template>
  <div class="notification-container">
    <transition-group name="notification" tag="div">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        :class="['notification', `notification--${notification.type}`]"
      >
        <div class="notification__content">
          <span class="notification__icon">{{ notification.icon }}</span>
          <span class="notification__message">{{ notification.message }}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Notification {
  id: number
  message: string
  type: 'success' | 'error' | 'warning' | 'info'
  icon: string
}

const notifications = ref<Notification[]>([])

let nextId = 1

const addNotification = (message: string, type: Notification['type'] = 'success') => {
  const icons = {
    success: '✅',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️'
  }

  const notification: Notification = {
    id: nextId++,
    message,
    type,
    icon: icons[type]
  }

  notifications.value.push(notification)

  // 3秒后自动移除通知
  setTimeout(() => {
    removeNotification(notification.id)
  }, 3000)
}

const removeNotification = (id: number) => {
  const index = notifications.value.findIndex(n => n.id === id)
  if (index !== -1) {
    notifications.value.splice(index, 1)
  }
}

// 暴露方法给父组件使用
defineExpose({
  addNotification
})
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  width: 300px;
}

.notification {
  margin-bottom: 10px;
  padding: 15px;
  border: 3px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--border-color);
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
  transform-origin: top right;
  color: var(--text-color);
}

.notification__content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notification--success {
  background-color: var(--neo-brutalist-green);
}

.notification--error {
  background-color: var(--neo-brutalist-red);
  color: white;
}

.notification--warning {
  background-color: var(--neo-brutalist-yellow);
}

.notification--info {
  background-color: var(--neo-brutalist-blue);
  color: white;
}

/* 进入和离开动画 */
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(100%) scale(0.5);
}

.notification-enter-to {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.notification-leave-from {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(100%) scale(0.5);
}
</style>